<template>
  <div class="product-page">
    <van-nav-bar
      title=""
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 搜索框 -->
    <div class="search-bar">
      <el-input
        placeholder="搜索商品"
        v-model="searchQuery"
        suffix-icon="el-icon-search">
      </el-input>
    </div>

    <div class="container">
      <!-- 分类标签 -->
      <div class="category">
        <el-col :span="24">
          <el-button
            class="category-button"
            @click="show2(name='')">
            全部
          </el-button>
        </el-col>
        <el-col v-for="category in categories" :key="category.name" :span="24" >
          <el-button
            class="category-button"
          @click="show2(category.name)">
            {{ category.name }}
          </el-button>
        </el-col>
      </div>
      <!-- 商品列表 -->
      <div class="product-list">
        <el-row :gutter="20">
          <el-col v-for="product in products" :key="product.id" :span="8">
            <div class="product-item" @click="cun(product.id)">
              <img :src="product.photo" alt="商品图片" />
              <p>{{ product.comname }}</p>
              <p>¥{{ product.price }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      searchQuery: '',
      activeTab: '全部',
      categories: [],
      products: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    show1(){
      axios.post('/home/homeshow').then(res=>{
        this.categories=res.data.data
      })
    },
    show2(name){
      axios.post(`/home/homeshowlist?name=${name}`).then(res=>{
        this.products=res.data.data
      })
    },
    cun(id){
      this.$router.push('/Bustails')
      localStorage.setItem('id',id)

    }
  },
  mounted() {
    this.show1();
    this.show2();

  }
};
</script>

<style scoped>
.product-page {
  padding: 20px;
  display: flex;
  flex-direction: column; /* 垂直排列 */
}

.search-bar {
  margin-bottom: 20px;
}

.container {
  display: flex; /* 水平排列 */
}

.category {
  margin-right: 20px; /* 分类按钮栏的右边距 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
}

.category-button {
  margin-bottom: 10px; /* 按钮之间的间距 */
}

.product-list {
  flex: 1; /* 扩展至剩余空间 */
}

.product-item {
  text-align: center;
  background-color: #f5f5f5; /* 背景色 */
  border-radius: 10px; /* 圆角 */
  padding: 10px; /* 内边距 */
}

.product-item img {
  max-width: 100%; /* 图片适应宽度 */
  height: auto; /* 保持比例 */
}

.active {
  background-color: #409EFF; /* 活动类的背景色 */
  color: white; /* 文本颜色 */
}
</style>





